<template>
    <div class="appointment-page">
        <!-- 科室选择部分 -->
        <section class="department-selector">
            <h3>请选择科室</h3>
            <select v-model="selectedDepartment" @change="onDepartmentChange">
                <option v-for="department in departments" :key="department.id" :value="department.id">{{ department.name }}</option>
            </select>
        </section>

        <!-- 时间选择部分（初始时隐藏，选好科室后显示） -->
        <transition name="fade">
            <section class="time-selector" v-if="selectedDepartment !== ''">
                <h3>请选择预约时间</h3>
                <!-- 假设这里使用一个第三方日期/时间选择器库，如vue2-datepicker或v-calendar -->
<!--                <date-time-picker v-model="selectedAppointmentTime" :disabled-dates="disabledDates"></date-time-picker>-->

                <!-- 或者手动构建时间选择器 -->
                <ul class="time-list">
                    <li v-for="slot in availableSlots" :key="slot" @click="onTimeSlotClick(slot)">
                        {{ slot.workDate }}
                    </li>
                </ul>
            </section>
        </transition>

        <!-- 医生选择部分 -->
        <transition name="fade" v-if="selectedDepartment !== '' && selectedAppointmentTime !== null">
            <section class="doctor-selector">
                <h3>请选择医生</h3>
                <ul class="doctor-list">
                    <li
                            v-for="doctor in availableDoctors"
                            :key="doctor.id"
                            @click="onDoctorClick(doctor)"
                            :class="{ 'selected': doctor.id === selectedDoctor.id }"
                    >
                        {{ doctor.doctorName }} -- {{ doctor.workTime }} -- {{ doctor.position }} (剩余号源：{{ doctor.residue }})
                    </li>
                </ul>
            </section>
        </transition>

        <!-- 预约按钮 -->
        <button :disabled="!canMakeAppointment" @click="makeAppointment">确认预约</button>
    </div>
</template>

<script>
    import DateTimePicker from 'vue2-datepicker';
    import ApiService from "@/apiService"; // 示例中的日期时间选择器库

    export default {
        components: {
            DateTimePicker
        },
        data() {
            return {
                selectedDepartment: '',
                selectedAppointmentTime: null,
                departments: [
                ],
                availableSlots: [], // 根据科室动态加载的时间段列表
                disabledDates: [], // 可根据后台返回的数据设置不可预约的日期
                selectedDoctor: {},
                availableDoctors: [], // 根据科室和时间段动态加载的医生列表

            };
        },
        computed: {
            canMakeAppointment() {
                return this.selectedDepartment !== '' && this.selectedAppointmentTime !== null && this.selectedDoctor.id !== undefined;
            }
        },

        watch: {
            // 监听科室和时间变化，以便重新获取可用医生列表
            selectedDepartment(departmentId) {
                if (this.selectedAppointmentTime !== null) {
                    this.fetchAvailableDoctors(departmentId, this.selectedAppointmentTime);
                }
            },
            selectedAppointmentTime(appointmentTime) {
                if (this.selectedDepartment !== '') {
                    this.fetchAvailableDoctors(this.selectedDepartment, appointmentTime);
                }
            },
        },
        methods: {

            async loadDep(){
                const response = await ApiService.get('/department/list');

                if(response.code===200){
                    this.departments=response.data
                }else{
                    alert('获取数据失败')
                }
            },

            onDoctorClick(doctor) {
                this.selectedDoctor = doctor;
                // 可在此处进行额外的逻辑处理，如验证所选医生是否可预约等
            },
            onDepartmentChange() {
                // 根据科室ID请求可预约挂号数据
                this.fetchAvailableSlots(this.selectedDepartment);
            },


            async fetchAvailableSlots(departmentId) {
                // 使用axios等HTTP库异步获取对应科室的可预约时间段
                const response = await ApiService.post('/doctor/workList',{departmentId:departmentId});

                if(response.code===200){
                    this.availableSlots=response.data
                }else{
                    alert('获取数据失败')
                }
            },

            onTimeSlotClick(slot) {
                this.selectedAppointmentTime = slot.workDate; // 若采用自定义时间槽方式
            },

            makeAppointment() {
                if (this.canMakeAppointment) {
                    console.log(this.selectedDoctor.id);
                    // 发送POST请求到服务器完成预约操作
                    const appointmentData = {
                        departmentId: this.selectedDepartment,
                        appointmentTime: this.selectedAppointmentTime,
                        // 其他必要信息...
                    };
                    this.appointmentAdd();
                    // axios.post('/api/appointments', appointmentData)
                } else {
                    alert('请先选择科室和预约时间');
                }

            },
            async appointmentAdd() {
                const response = await ApiService.get('/appointment/add?id=' + this.selectedDoctor.id);

                if(response.code===200){
                    alert('预约成功');
                }else{
                    alert('获取数据失败')
                }
            },
            async fetchAvailableDoctors(departmentId, appointmentTime) {
                const response = await ApiService.post('/doctor/workList',{departmentId:departmentId,appointmentTime:appointmentTime});

                if(response.code===200){
                    this.availableDoctors=response.data
                }else{
                    alert('获取数据失败')
                }
            },

            onDoctorChange() {
                // 可在此处进行额外的逻辑处理，如验证所选医生是否可预约等
            },
        },
        beforeMount(){
            this.loadDep()
        }
    };
</script>

<style scoped>
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }
     .doctor-list {
         list-style-type: none;
         padding: 0;
     }
    .doctor-list li {
        cursor: pointer;
    }
    .doctor-list li:hover,
    .doctor-list li.selected {
        background-color: #f0f0f0; /* 示例样式：鼠标悬停和选中时添加背景色 */
    }
</style>